<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <!-- Meta, title, CSS, favicons, etc. -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>智能化运维系统</title>

  <!-- Bootstrap -->
  <link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  <!-- NProgress -->
  <link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
  <!-- bootstrap-daterangepicker -->
  <link href="../vendors/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">

  <!-- Custom Theme Style -->
  <link href="../build/css/custom.min.css" rel="stylesheet">

  <!-- jQuery -->
  <script src="../vendors/jquery/dist/jquery.min.js"></script>


</head>

<body class="nav-md">
  <div class="container body">
    <div class="main_container">
      <div class="col-md-3 left_col">
        <div class="left_col scroll-view">
          <div class="navbar nav_title" style="border: 0;">
            <a href="index.html" class="site_title"><i class="fa fa-paw"></i> <span>Smart System</span></a>
          </div>

          <div class="clearfix"></div>

          <!-- menu profile quick info -->
          <div class="profile clearfix">
            <div class="profile_pic">
              <img src="images/istio.png" alt="..." class="img-circle profile_img">
            </div>
            <div class="profile_info">
              <span>Welcome</span>
              <h2></h2>
            </div>
          </div>
          <!-- /menu profile quick info -->

          <br />

          <!-- sidebar menu -->
          <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
            <div class="menu_section">
              <h3>智能化运行分析和自适应系统</h3>
              <ul class="nav side-menu">
                <li><a><i class="fa fa-home"></i> 监控界面 <span class="fa fa-chevron-down"></span></a>
                  <ul class="nav child_menu">

                    <li><a href="layermodel.html">分层监控</a></li>
                    <li><a href="dataUI.html">指标数据</a></li>
                    
                  </ul>
                </li>
                <li><a><i class="fa fa-edit"></i> 自适应调整 <span class="fa fa-chevron-down"></span></a>
                  <ul class="nav child_menu">
                    <li><a href="strategy.html">策略部署</a></li>

                  </ul>
                </li>
                <li><a><i class="fa fa-desktop"></i> 风险分析告警 <span class="fa fa-chevron-down"></span></a>
                  <ul class="nav child_menu">
                    <li><a href="alert.html">风险告警及指标追踪</a></li>

                  </ul>
                </li>

                <li><a><i class="fa fa-table"></i> 指标阈值设置 <span class="fa fa-chevron-down"></span></a>
                  <ul class="nav child_menu">
                    <li><a href="tasklayer.html">任务层</a></li>
                    <li><a href="servicelayer.html">微服务层</a></li>
                    <li><a href="nodelayer.html">结点层</a></li>
                  </ul>
                </li>

              
              </ul>
            </div>

          
          </div>

            <!--
              <div class="menu_section">
                <h3>Live On</h3>
                <ul class="nav side-menu">
                  <li><a><i class="fa fa-bug"></i> Additional Pages <span class="fa fa-chevron-down"></span></a>
                    <ul class="nav child_menu">
                      <li><a href="e_commerce.html">E-commerce</a></li>
                      <li><a href="projects.html">Projects</a></li>
                      <li><a href="project_detail.html">Project Detail</a></li>
                      <li><a href="contacts.html">Contacts</a></li>
                      <li><a href="profile.html">Profile</a></li>
                    </ul>
                  </li>
                  <li><a><i class="fa fa-windows"></i> Extras <span class="fa fa-chevron-down"></span></a>
                    <ul class="nav child_menu">
                      <li><a href="page_403.html">403 Error</a></li>
                      <li><a href="page_404.html">404 Error</a></li>
                      <li><a href="page_500.html">500 Error</a></li>
                      <li><a href="plain_page.html">Plain Page</a></li>
                      <li><a href="login.html">Login Page</a></li>
                      <li><a href="pricing_tables.html">Pricing Tables</a></li>
                    </ul>
                  </li>
                  <li><a><i class="fa fa-sitemap"></i> Multilevel Menu <span class="fa fa-chevron-down"></span></a>
                    <ul class="nav child_menu">
                        <li><a href="#level1_1">Level One</a>
                        </li>
                        <li><a>Level One<span class="fa fa-chevron-down"></span></a>
                          <ul class="nav child_menu">
                            <li class="sub_menu"><a href="level2.html">Level Two</a>
                            </li>
                            <li><a href="#level2_1">Level Two</a>
                            </li>
                            <li><a href="#level2_2">Level Two</a>
                            </li>
                          </ul>
                        </li>
                        <li><a href="#level1_2">Level One</a>
                        </li>
                    </ul>
                  </li>                  
                  <li><a href="javascript:void(0)"><i class="fa fa-laptop"></i> Landing Page <span class="label label-success pull-right">Coming Soon</span></a></li>
                </ul>
              </div>
            -->
          </div>
          <!-- /sidebar menu -->

          <!-- /menu footer buttons -->
          <!--
            <div class="sidebar-footer hidden-small">
              <a data-toggle="tooltip" data-placement="top" title="Settings">
                <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
              </a>
              <a data-toggle="tooltip" data-placement="top" title="FullScreen">
                <span class="glyphicon glyphicon-fullscreen" aria-hidden="true"></span>
              </a>
              <a data-toggle="tooltip" data-placement="top" title="Lock">
                <span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
              </a>
              <a data-toggle="tooltip" data-placement="top" title="Logout" href="login.html">
                <span class="glyphicon glyphicon-off" aria-hidden="true"></span>
              </a>
            </div>f
          -->
          <!-- /menu footer buttons -->
        </div>
      </div>

      <!-- top navigation -->
      <div class="top_nav">
        <div class="nav_menu">
          <div class="nav toggle">
            <a id="menu_toggle"><i class="fa fa-bars"></i></a>
          </div>
          <!--
                <nav class="nav navbar-nav">
                <ul class=" navbar-right">
                  <li class="nav-item dropdown open" style="padding-left: 15px;">
                    <a href="javascript:;" class="user-profile dropdown-toggle" aria-haspopup="true" id="navbarDropdown" data-toggle="dropdown" aria-expanded="false">
                      <img src="images/img.jpg" alt="">John Doe
                    </a>
                    <div class="dropdown-menu dropdown-usermenu pull-right" aria-labelledby="navbarDropdown">
                      <a class="dropdown-item"  href="javascript:;"> Profile</a>
                        <a class="dropdown-item"  href="javascript:;">
                          <span class="badge bg-red pull-right">50%</span>
                          <span>Settings</span>
                        </a>
                    <a class="dropdown-item"  href="javascript:;">Help</a>
                      <a class="dropdown-item"  href="login.html"><i class="fa fa-sign-out pull-right"></i> Log Out</a>
                    </div>
                  </li>
  
                  <li role="presentation" class="nav-item dropdown open">
                    <a href="javascript:;" class="dropdown-toggle info-number" id="navbarDropdown1" data-toggle="dropdown" aria-expanded="false">
                      <i class="fa fa-envelope-o"></i>
                      <span class="badge bg-green">6</span>
                    </a>
                    <ul class="dropdown-menu list-unstyled msg_list" role="menu" aria-labelledby="navbarDropdown1">
                      <li class="nav-item">
                        <a class="dropdown-item">
                          <span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
                          <span>
                            <span>John Smith</span>
                            <span class="time">3 mins ago</span>
                          </span>
                          <span class="message">
                            Film festivals used to be do-or-die moments for movie makers. They were where...
                          </span>
                        </a>
                      </li>
                      <li class="nav-item">
                        <a class="dropdown-item">
                          <span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
                          <span>
                            <span>John Smith</span>
                            <span class="time">3 mins ago</span>
                          </span>
                          <span class="message">
                            Film festivals used to be do-or-die moments for movie makers. They were where...
                          </span>
                        </a>
                      </li>
                      <li class="nav-item">
                        <a class="dropdown-item">
                          <span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
                          <span>
                            <span>John Smith</span>
                            <span class="time">3 mins ago</span>
                          </span>
                          <span class="message">
                            Film festivals used to be do-or-die moments for movie makers. They were where...
                          </span>
                        </a>
                      </li>
                      <li class="nav-item">
                        <a class="dropdown-item">
                          <span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
                          <span>
                            <span>John Smith</span>
                            <span class="time">3 mins ago</span>
                          </span>
                          <span class="message">
                            Film festivals used to be do-or-die moments for movie makers. They were where...
                          </span>
                        </a>
                      </li>
                      <li class="nav-item">
                        <div class="text-center">
                          <a class="dropdown-item">
                            <strong>See All Alerts</strong>
                            <i class="fa fa-angle-right"></i>
                          </a>
                        </div>
                      </li>
                    </ul>
                  </li>
                </ul>
              </nav>
              -->
        </div>
      </div>

      <!-- /top navigation -->

      <!-- page content -->
      <div class="right_col" role="main">
        <div class="">
          <div class="page-title">
            <div class="title_left">
              <h3>三层监控系统 <small>  </small></h3>
            </div>
          </div>

          <div class="clearfix"></div>
          <div>
            <canvas id="task" height="100px" width="1050px">
              <script>

                $(document).ready(function () {
                  var canvas = document.getElementById('task');
                  var stage = new JTopo.Stage(canvas);
                  

                  var scene = new JTopo.Scene(stage);

                
                  for (var i = 0; i < 4; i++) {
                    if(i==0){
                      var node = new JTopo.Node('态势上图');
                    }else if(i==1){
                      var node = new JTopo.Node('综合分析');
                    }else if(i==2){
                      var node = new JTopo.Node('情报处理');
                    }else if(i==3){
                      var node = new JTopo.Node('情报采集');
                    }
                    
                    node.fillColor="84,255,159";

                    //
                    node.addEventListener('mouseover', function (event) {
                      currentNode = this;
                      taskdatahandler(event);
                    });


                    node.fontColor = "128,128,128";
                    node.setSize(70,70);
                    node.setLocation(screen.width/(i+2), 10);
                    scene.add(node);
                  }


                  var beginNode = null;
                  var tempNodeA = new JTopo.Node('tempA');;
                  tempNodeA.setSize(1, 1);

                  var tempNodeZ = new JTopo.Node('tempZ');;
                  tempNodeZ.setSize(1, 1);

                  var link = new JTopo.Link(tempNodeA, tempNodeZ);

                  scene.mouseup(function (e) {
                    if (e.button == 2) {
                      scene.remove(link);
                      return;
                    }
                    if (e.target != null && e.target instanceof JTopo.Node) {
                      if (beginNode == null) {
                        beginNode = e.target;
                        scene.add(link);
                        tempNodeA.setLocation(e.x, e.y);
                        tempNodeZ.setLocation(e.x, e.y);
                      } else if (beginNode !== e.target) {
                        var endNode = e.target;
                        var l = new JTopo.Link(beginNode, endNode);
                        scene.add(l);
                        beginNode = null;
                        scene.remove(link);
                      } else {
                        beginNode = null;
                      }
                    } else {
                      scene.remove(link);
                    }
                  });

                  scene.mousedown(function (e) {
                    if (e.target == null || e.target === beginNode || e.target === link) {
                      scene.remove(link);
                    }
                  });
                  scene.mousemove(function (e) {
                    tempNodeZ.setLocation(e.x, e.y);
                  });

                  var textfield = $("#jtopo_textfield");
                  scene.dbclick(function (event) {
                    if (event.target == null) return;
                    var e = event.target;
                    textfield.css({
                      top: event.pageY,
                      left: event.pageX - e.width / 2
                    }).show().attr('value', e.text).focus().select();
                    e.text = "";
                    textfield[0].JTopoNode = e;
                  });

                  $("#jtopo_textfield").blur(function () {
                    textfield[0].JTopoNode.text = textfield.hide().val();
                  });


                  function taskdatahandler(event) {
                    if (event.button == 0) {//移动到指定节点
                      $("#servicedata").css({
                        top: event.pageY,
                        left: event.pageX
                      }).show();
                    }
                  }

                  function taskoperationhandler(event) {
                    if (event.button == 2) {//移动到指定节点
                      $("#servicedata").hide();
                      $("#serviceoperation").css({
                        top: event.pageY,
                        left: event.pageX
                      }).show();
                    }
                  }

                  stage.click(function (event) {
                    if (event.button == 0) {// 右键
                      // 关闭弹出菜单（div）
                      $("#taskdata").hide();
                    }
                  });

                });     
              </script>
            </canvas>

            <style>
              #taskdata {
                border: 1px solid #aaa;
                border-bottom: 0;
                background: #eee;
                position: absolute;
                list-style: none;
                margin: 0;
                padding: 0;
                display: none;
              }

              #taskdata li a {
                display: block;
                padding: 10px;
                border-bottom: 1px solid #aaa;
                cursor: pointer;
              }
              </style>

            <ul id="taskdata" style="display: none;">
              <li><a>任务并发数  30</a></li>
              <li><a>任务响应用时 40ms</a></li>
              <li><a>任务用时    300ms</a></li>
            </ul>

            <canvas id="canvas" height="600px" width="1050px">
              <script>
                $(document).ready(function () {
                  var currentNode = null;
                  var canvas = document.getElementById("canvas");
                  var stage = new JTopo.Stage(canvas);
                  //显示工具栏
                  //showJTopoToobar(stage);
                  var scene = new JTopo.Scene();
                  stage.add(scene);
                  //scene.background = "images/paypal.png";
              
                  var cloudNode = new JTopo.Node('master');
                  cloudNode.fontColor = "128,128,128";
                  cloudNode.font = "20px";
                  cloudNode.setSize(70, 70);
                  cloudNode.setLocation(screen.width / 3, screen.height / 3);
                  cloudNode.layout = { type: 'circle', radius: 150 };

                  cloudNode.fillColor="0,255,0";

                  scene.add(cloudNode);

                  for (var i = 1; i < 4; i++) {
                    var node = new JTopo.CircleNode('Node' + i);
                    node.fillStyle = '200,255,0';
                    node.fontColor = "128,128,128";
                    node.radius = 15;
                    node.setSize(50,50);
                    node.setLocation(scene.width * Math.random(), scene.height * Math.random());
                    node.layout = { type: 'circle', radius: 80 };

                    node.fillColor="0,255,0";
                
                    scene.add(node);
                    var link = new JTopo.Link(cloudNode, node);
                    scene.add(link);

                   
                    if(i==1){
                      for(var j=0;j<3;j++){
                      if(i==1&&j==0){
                        var vmNode = new JTopo.CircleNode('图像采集');
                      }else if(i==1&&j==1){
                      var vmNode = new JTopo.Node('特征提取');
                      }
                      else if(i==1&&j==2){
                      var vmNode = new JTopo.Node('普通机器学习算法');
                      }
                      vmNode.radius = 10;
                      vmNode.fillStyle = '255,255,0';
                      vmNode.fontColor = "128,128,128";
                      vmNode.fillColor="	255,246,143";
                      vmNode.setSize(40,40);
                      vmNode.setLocation(scene.width * Math.random(), scene.height * Math.random());
                     
                      scene.add(vmNode);
                      scene.add(new JTopo.Link(node, vmNode));
                      }
                    }  

                    if(i==2){
                      for(var j=0;j<5;j++){
                        if(i==2&&j==0){
                      var vmNode = new JTopo.Node('训练集规模确定');
                      }
                      else if(i==2&&j==1){
                      var vmNode = new JTopo.Node('图像处理');
                      }
                      else if(i==2&&j==2){
                      var vmNode = new JTopo.Node('深度学习算法');
                      }else{
                        var vmNode = new JTopo.Node('otherservice');
                      }
                      vmNode.radius = 10;
                      vmNode.fillStyle = '255,255,0';
                      vmNode.fontColor = "128,128,128";
                      vmNode.fillColor="	255,246,143";
                      vmNode.setSize(40,40);
                      vmNode.setLocation(scene.width * Math.random(), scene.height * Math.random());
                     
                      scene.add(vmNode);
                      scene.add(new JTopo.Link(node, vmNode));
                      }
                    }  
                    
                    if(i==3){
                      for(var j=0;j<1;j++){
                        if(i==3&&j==0){
                      var vmNode = new JTopo.Node('深度学习算法');
                      }
                      else{
                        var vmNode = new JTopo.CircleNode('otherservice');
                      }
                      vmNode.radius = 10;
                      vmNode.fillStyle = '255,255,0';
                      vmNode.fontColor = "128,128,128";
                      vmNode.fillColor="	255,246,143";
                      vmNode.setSize(40,40);
                      vmNode.setLocation(scene.width * Math.random(), scene.height * Math.random());
                     
                      scene.add(vmNode);
                      scene.add(new JTopo.Link(node, vmNode));
                      }
                    }  
                    
                  }
                  JTopo.layout.layoutNode(scene, cloudNode, true);

                  scene.addEventListener('mouseup', function (e) {
                    if (e.target && e.target.layout) {
                      JTopo.layout.layoutNode(scene, e.target, true);
                    }
                  });



                  function handler(event) {
                    if (event.button == 2) {// 右键
                      // 当前位置弹出菜单（div）
                      $("#parameter1").hide();
                      $("#menu").css({
                        top: event.pageY,
                        left: event.pageX
                      }).show();
                    }
                  }


                  function nodehandler(event) {
                    if (event.button == 0) {//移动到指定节点
                      $("#parameter1").css({
                        top: event.pageY,
                        left: event.pageX
                      }).show();
                    }
                  }

                  function servicedatahandler(event) {
                    if (event.button == 0) {//移动到指定节点
                      $("#servicedata").css({
                        top: event.pageY,
                        left: event.pageX
                      }).show();
                    }
                  }

                  function serviceoperationhandler(event) {
                    if (event.button == 2) {//移动到指定节点
                      $("#servicedata").hide();
                      $("#serviceoperation").css({
                        top: event.pageY,
                        left: event.pageX
                      }).show();
                    }
                  }

                  stage.click(function (event) {
                    if (event.button == 0) {// 右键
                      // 关闭弹出菜单（div）
                      $("#menu").hide();
                      $("#parameter1").hide();
                      $("#serviceoperation").hide();
                      $("#servicedata").hide();
                    }
                  });



                });



                $("#menu").click(function () {
                  var text = $(this).text();

                  if (text == '删除该节点') {
                    scene.remove(currentNode);
                    currentNode = null;
                  } if (text == '撤销上一次操作') {
                    currentNode.restore();
                  } else {
                    currentNode.save();
                  }

                  if (text == '更改颜色') {
                    currentNode.fillColor = JTopo.util.randomColor();
                  } else if (text == '顺时针旋转') {
                    currentNode.rotate += 0.5;
                  } else if (text == '逆时针旋转') {
                    currentNode.rotate -= 0.5;
                  } else if (text == '放大') {
                    currentNode.scaleX += 0.2;
                    currentNode.scaleY += 0.2;
                  } else if (text == '缩小') {
                    currentNode.scaleX -= 0.2;
                    currentNode.scaleY -= 0.2;
                  }
                  $("#contextmenu").hide();
                });

              </script>
            </canvas>

            <ul id="menu" style="display: none;">
              <li><a>重启</a></li>
              <li><a>取消</a></li>
              <li><a>部署新服务</a></li>
            </ul>

            <ul id="parameter1" style="display: none;">
              <li><a>CPU 70</a></li>
              <li><a>Memory 60</a></li>
              <li><a>Network input 60</a></li>
              <li><a>Network output 60</a></li>
              <li><a>IOPS 50</a></li>
            </ul>

            <ul id="servicedata" style="display: none;">
              <li><a>资源利用率  60</a></li>
              <li><a>服务出度    2</a></li>
              <li><a>服务入度    3</a></li>
              <li><a>单服务用时  70ms</a></li>
            </ul>

            <ul id="serviceoperation" style="display: none;">
              <li><a>重部署</a></li>
              <li><a>熔断</a></li>
              <li><a>限流</a></li>
              <li><a>关闭</a></li>
            </ul>



            <style>
              #menu {
                border: 1px solid #aaa;
                border-bottom: 0;
                background: #eee;
                position: absolute;
                list-style: none;
                margin: 0;
                padding: 0;
                display: none;
              }

              #menu li a {
                display: block;
                padding: 10px;
                border-bottom: 1px solid #aaa;
                cursor: pointer;
              }

              #parameter1 {
                border: 1px solid #aaa;
                border-bottom: 0;
                background: #eee;
                position: absolute;
                list-style: none;
                margin: 0;
                padding: 0;
                display: none;
              }

              #parameter1 li a {
                display: block;
                padding: 10px;
                border-bottom: 1px solid #aaa;
                cursor: pointer;
              }

              #servicedata {
                border: 1px solid #aaa;
                border-bottom: 0;
                background: #eee;
                position: absolute;
                list-style: none;
                margin: 0;
                padding: 0;
                display: none;
              }

              #servicedata li a {
                display: block;
                padding: 10px;
                border-bottom: 1px solid #aaa;
                cursor: pointer;
              }

              #serviceoperation {
                border: 1px solid #aaa;
                border-bottom: 0;
                background: #eee;
                position: absolute;
                list-style: none;
                margin: 0;
                padding: 0;
                display: none;
              }

              #serviceoperation li a {
                display: block;
                padding: 10px;
                border-bottom: 1px solid #aaa;
                cursor: pointer;
              }
            </style>

          </div>
          <div class="clearfix"></div>
          <br />
        </div>
      </div>
      <!-- /page content -->

      <!-- footer content -->
      <footer>
        <div class="pull-right">
          <a href="https://colorlib.com"></a>
        </div>
        <div class="clearfix"></div>
      </footer>
      <!-- /footer content -->
    </div>
  </div>

  <!-- jQuery -->
  <script src="../vendors/jquery/dist/jquery.min.js"></script>
  <!-- Bootstrap -->
  <script src="../vendors/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
  <!-- FastClick -->
  <script src="../vendors/fastclick/lib/fastclick.js"></script>
  <!-- NProgress -->
  <script src="../vendors/nprogress/nprogress.js"></script>
  <!-- Chart.js -->
  <script src="../vendors/Chart.js/dist/Chart.min.js"></script>
  <!-- jQuery Sparklines -->
  <script src="../vendors/jquery-sparkline/dist/jquery.sparkline.min.js"></script>
  <!-- Flot -->
  <script src="../vendors/Flot/jquery.flot.js"></script>
  <script src="../vendors/Flot/jquery.flot.pie.js"></script>
  <script src="../vendors/Flot/jquery.flot.time.js"></script>
  <script src="../vendors/Flot/jquery.flot.stack.js"></script>
  <script src="../vendors/Flot/jquery.flot.resize.js"></script>
  <!-- Flot plugins -->
  <script src="../vendors/flot.orderbars/js/jquery.flot.orderBars.js"></script>
  <script src="../vendors/flot-spline/js/jquery.flot.spline.min.js"></script>
  <script src="../vendors/flot.curvedlines/curvedLines.js"></script>
  <!-- DateJS -->
  <script src="../vendors/DateJS/build/date.js"></script>
  <!-- bootstrap-daterangepicker -->
  <script src="../vendors/moment/min/moment.min.js"></script>
  <script src="../vendors/bootstrap-daterangepicker/daterangepicker.js"></script>

  <script src="../vendors/jtopo-0.4.8-min.js"></script>

  <!-- Custom Theme Scripts -->
  <script src="../build/js/custom.min.js"></script>

  <script src="../vendors/echarts.min.js"></script>


</body>

</html>